<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>看你有多色</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<style type="text/css">
			#welcome .hdw{
				width: 100%;
				margin-top: 3rem;
				animation: hdw 2s infinite;
			}
			.hdw a{
				color: white;
			}
			@-webkit-keyframes hdw{
				0%{opacity: 0;}
				50%{opacity: 1;}
				100%{opacity: 0;}
			}
		</style>
	</head>
	<body>
		<!--欢迎页面内容-->
		<div id="welcome">
			<h1>看你有多色</h1>
			<p>找出颜色不同的一个</p>
			<div class="btnWap">
				<button onclick="start()">开始游戏</button>
			</div>
			<p class="hdw"><a href="http://www.houdunwang.com">后盾网，人人做后盾</a></p>
		</div>
		<!--//遮罩下面的内容-->
		<div id="content">
			<!--//分数和时间-->
			<div class="scoreWrap">得分：
				<span id="score">0</span>
			</div>
			<p id="time"></p>
			<!--放方块的盒子-->
			<div id="box">
				
			</div>
		</div>
		<!--//结束页面-->
		<div id="over">
			<h1 id="userLevel">L1你是瞎子</h1>
			<div class="buttonWrap">
				<button onclick="start()">点击重玩</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var color = function(){
			//获得原生对象
			this.hdEle = document.getElementById('box');
			//获得画布对象
			var obj = this.hdEle.getContext('2d');			
			//浏览器的宽高
			this.innerW = window.innerWidth;
			this.innerH = window.innerHeight;
			//容器宽高
			this.hdEleW = this.innerW;
			this.hdEleH = this.innerW;
			//默认等级为1
			this,level = 1;
			//最高等级是8
			this.maxLevel = 8;
			//默认间隔
			this.jiange = 10;
			//正确的index
			this.rightIndex;
			//用户分数
			this.score = 0;
			//初始化时间
			this.time = 28;
			
			var hdThis = this;
			/**
			 * 初始化
			 */
			this.hdInit = function(){
				//设置欢迎页面的高度
				document.getElementById('welcome').style.height = this.innerH + "px";
				//设置结束页面的高度
				document.getElementById('over').style.height = this.innerH + "px";
				//渲染画布
				document.getElementById('box').style.height = this.innerW + 'px';
			}
			this.hdRun = function(){
				//开始游戏
				hdThis.hdStart();
				//填充有色方块
				this.hdCreateRect();
			}
			/**
			 * 填充有色方块
			 */
			this.hdCreateRect = function(){
				while(this.hdEle.hasChildNodes()){
					this.hdEle.removeChild(this.hdEle.firstChild);
				}
				//后的除了边框的元素的宽度
				var w = this.hdEle.clientWidth;
				//间隔
				if(this.level<this.maxLevel){
					this.jiange--;
				}
				//计算色块总宽度
				var leftW = w - this.level * this.jiange;
				//计算每一个色块的宽度
				var everyW = leftW/(this.level+1);
				//随机颜色
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				//循环方块，将方块写入到box当中
				for(var i=0;i<(this.level+1) * (this.level+1);i++){
					var span = document.createElement('span')
					span.style.width = everyW + "px";
					span.style.height = everyW + "px";
					span.style.background = "rgb("+r+","+g+","+b+")";
					span.style.display = 'block';
					span.style.float = "left";
					//如果不是第一列。有margin-left
					if(i%(this.level+1)){
						span.style.marginLeft = this.jiange + 'px';
					}
					//如果不是第一行，都有margin-top
					if(i>=(this.level+1)){
						span.style.marginTop = this.jiange + "px";
					}
					//将span写入
					this.hdEle.appendChild(span);
				}
				//随机一个span，将颜色稍做改变
				var span = this.hdEle.getElementsByTagName('span');
				//随机抓组span序号
				var randIndex = Math.floor(Math.random()*span.length);
				//将我们随机抓取的span颜色稍做改变
				r += 15;
				g += 15;
				b += 15;
				span[randIndex].style.background = "rgb("+r+","+g+","+b+")";
				//赋值给正确index
				this.rightIndex = randIndex;
				//检测用户点击
				this.hdCheck();
				
			}
			/**
			 * 检测用户点击
			 */
			this.hdCheck = function(){
				//获得所有的方块
				var span = this.hdEle.getElementsByTagName('span');
				for(var i=0;i<span.length;i++){
					//序号压入索引
					span[i].index = i;
					span[i].onclick = function(){
						
						//如果点击正确
						if(this.index==hdThis.rightIndex){
							
							if(hdThis.level<hdThis.maxLevel){
								hdThis.level++;
							}
							//重新创建
							hdThis.hdCreateRect();
							//分数+1
							hdThis.score++;
							document.getElementById("score").innerHTML = hdThis.score;
						}
					}
				}
			}
			/**
			 * 开始游戏
			 */
			this.hdStart = function(){
				//欢迎页面消失
				document.getElementById('welcome').style.display = 'none';
				document.getElementById('over').style.display = 'none';
				//获取时间
				var timeEle = document.getElementById("time");
				timeEle.innerHTML = this.time
				//获取显示用户等级的元素
				var userLevel = document.getElementById('userLevel');
				//设置定时器
				var time = this.time;
				
				var timer = setInterval(function(){
					if(time==0){
						switch(true){
							case hdThis.score<8:
								userLevel.innerHTML = 'L1你是瞎子';
								break;
							case hdThis.score<20:
								userLevel.innerHTML = 'L2你是猫的眼睛';
								break;	
							case hdThis.score<30:
								userLevel.innerHTML = 'L3猎鹰的眼睛';
								break;
							case hdThis.score<40:
								userLevel.innerHTML = 'L4上帝视角';
								break;							
							defalut:
								userLevel.innerHTML = 'L999,你别玩了，太厉害了';
								break;	
						}
						//显示结束界面
						document.getElementById('over').style.display = 'block';
						//清楚定时器
						clearInterval(timer)
						return;
					}
					time--;
					timeEle.innerHTML = time;
				},1000)
			}
		}
		var obj = new color;
		obj.hdInit();
		function start(){
			//等级恢复到1
			obj.level = 1;
			//分数归零
			obj.score = 0;
			//间隔恢复到10
			obj.jiange = 10;


			obj.hdRun();
		}
	</script>
</html>
